<template>
  <div class="tool">
    <el-row>
      <el-col :span="6">
        <div class="tool-list">
          <span class="tool-item" :class="[clickTool == 'tool-base64' ? 'tool-item-focus':'']" @click="changeTool('tool-base64')">
            <span class="tool-item-title">Base64工具</span>
            <span class="tool-item-desc">base64数据解密加密</span>
          </span>
          <span class="tool-item" :class="[clickTool == 'tool-json' ? 'tool-item-focus':'']" @click="changeTool('tool-json')">
            <span class="tool-item-title">JSON工具</span>
            <span class="tool-item-desc">对json格式数据进行格式化</span>
          </span>
        </div>

      </el-col>
      <el-col :span="18">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {useRouter} from "vue-router";

// 路由
const router = useRouter();

const clickTool = ref('tool-base64')

onMounted(() => {
  clickTool.value='tool-base64'
  router.push({name: 'tool-base64'})
})

const changeTool = (routerName:string) => {
  clickTool.value = routerName
  router.push({name: routerName, query: {jsonStr: ''}})
}
</script>


<style scoped lang="scss">
  .tool {
    padding: 18px 0;

    .tool-list {
      height: calc(100vh - 36px);
      padding: 0 5px;
      border-right: 1px solid #f3eded;

      .tool-item-focus {
        box-shadow: 0px 2px 7px #409EFF;
        //box-shadow: var(--el-box-shadow);
      }
      .tool-item {
        display: block;
        margin: 10px 0;
        border-radius: 5px;
        padding: 5px;
        border: 1px solid #dad1d1;
        cursor: pointer;
        &:hover {
          box-shadow: 0px 2px 7px #409EFF;
        }


        > span {
          display: block;
        }
        .tool-item-title {
          border-bottom: 1px solid #d0c6c6;
          font-weight: bold;
          font-size: 16px;
        }

        .tool-item-desc {
          font-size: 12px;
          color: #ada7a7;
        }
      }
    }
  }
</style>